<template>
  <a-cascader
      :field-names="fieldNames"
      :placeholder="placeholder"
      :options="options"
      v-model:value="defaultValue"
      @change="onChange"
  />
</template>

<script setup>
import { computed, ref } from 'vue'
// 省市区数据来自：https://github.com/uiwjs/province-city-china
// 感谢博主提供：https://www.asni.cn/2217
import provinces from './level.json'
const emit = defineEmits(['change'])
const props = defineProps({
  index: {
    type: Number,
    default () {
      return 0
    }
  },
  fieldNames: {
    type: Object,
    default () {
      return { label: 'name', value: 'name', children: 'children' }
    }
  },
  placeholder: {
    type: String,
    default: '请选择所在区域'
  },
  // 默认值
  defaultShow: {
    type: Array,
    default () {
      return []
    }
  }
})
const options = ref(provinces)
const defaultValue = ref([])
const onChange = (value,selectedOptions) => {
  emit('change', value, selectedOptions)
  defaultValue.value = value
}

// const defaultValue = computed(() => {
//   return props.defaultValue
// })

</script>
